<script setup>
import { ref } from 'vue'
import { articleGetChannel, delChannel } from '@/api/article'
import {
    Delete,
    Edit,

} from '@element-plus/icons-vue'
import ChannelEdit from './components/ChannelEdit.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const channelData = ref([])
const editChannel = ref()
const loading = ref(false)
const getArcChannel = async () => {
    loading.value = true
    const res = await articleGetChannel()
    console.log(res.data.data);
    channelData.value = res.data.data
    loading.value = false
    // channelData.value=res.data.data
}
getArcChannel()
const addChannel = () => {
    editChannel.value.open({})
}
const editBtn = (row, $index) => {
    console.log(row);
    console.log($index);
    editChannel.value.open(row)

}
const delBtn = async (row, $index) => {

    await ElMessageBox.confirm(
        '您是否删除这一条信息?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await delChannel(row.id)
            getArcChannel()
            ElMessage({
                type: 'success',
                message: '成功删除',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除进程',
            })
        })

}
const successBtn = () => {
    getArcChannel()
}

</script>
<template>
    <pageContainer title="文章分类">
        <template #addButton>
            <el-button type="primary" @click="addChannel">添加分类</el-button>
        </template>
        <el-table :data="channelData" class="channelTable" border stripe style="width: 200; margin-top: 20px;"
            v-loading="loading">
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="cate_name" label="分类名称" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="cate_alias" label="分类别名" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="{ row, $index }">
                    <el-button type="primary" :icon="Edit" circle @click="editBtn(row, $index)" plain />
                    <el-button type="danger" :icon="Delete" circle @click="delBtn(row, $index)" plain />
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="数据还未准备" />
            </template>
        </el-table>
        <ChannelEdit ref="editChannel" @success="successBtn"></ChannelEdit>


    </pageContainer>
</template>
<style scoped lang="scss"></style>